
<template>
	<div class="yongjinjilu">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/yongjin' }">分销商管理</el-breadcrumb-item>
            <el-breadcrumb-item>分销商等级值管理</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 0px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <div class="flex" style="margin: 30px 0;">
            <div style="margin-right: 20px;"><el-button @click="chuangjian(1)" type="primary" round >+奖励等级值</el-button></div>
            <div><el-button @click="chuangjian(2)" type="primary" round >-扣罚等级值</el-button></div>
          </div>
          <el-table :data="list" style="width: 100%" ref="multipleTable" >

            <el-table-column align="center" prop="title" label="任务"></el-table-column>
            <el-table-column align="center" prop="active_status" label="等级值">
              <template slot-scope="scope">
                <div v-if="scope.row.add_exp >= 0" style="color: rgb(9, 134, 0);">+{{scope.row.add_exp}}</div>
                <div v-if="scope.row.add_exp < 0" style="color: rgb(236, 82, 1);">{{scope.row.add_exp}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="new_exp" label="等级结余"></el-table-column>
            <el-table-column align="center" prop="remark" label="原因"></el-table-column>
          </el-table>

          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
           @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
		   <!-- <footers></footers> -->
        </div>
      </div>
    </div>


    <el-dialog :title="tt" :visible.sync="log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="margin-bottom: 20px;"><el-input placeholder="请输入等级值额度" v-model="all.exp" style="width: 360px;"></el-input></div>
      <div v-if="tt == '奖励等级值'"><el-input placeholder="请输入奖励原因" v-model="all.remark" style="width: 360px;"></el-input></div>
      <div v-if="tt == '扣除等级值'"><el-input placeholder="请输入扣罚原因" v-model="all.remark" style="width: 360px;"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="log = false">关闭</el-button>
        <el-button round type="primary" @click="queding">确定</el-button>
      </span>
    </el-dialog>


    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
          <div style="font-size: 0.36rem; font-weight: bold;">分销商管理</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">分销商管理</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>分销商等级值管理</div>
        </div>
      </div>

      <div style="padding: 0.3rem;">
        开发中
      </div>
    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'yongjinjilu',
    components:{
      left,top,topandleft,footers
    },
		data() {
			return {
        search:{
          page:1,
          page_size:20,
        },
        list:[],
        total:0,
        log:false,
        all:{
          user_id:this.$route.query.id,
          exp:"",
          remark:""
        },

        widthss:false,
        shoujiban:false,
        loading: false,
        finished: false,
			}
		},
		created() {

		},
		mounted() {
      if(window.screen.width == 1920){
        this.widthss = true
      }
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
      }else{
        this.getlist()
      }
		},
		methods: {
      chuangjian:function(val){
        if(val == 1){
          this.tt = '奖励等级值'
        }else{
          this.tt = '扣除等级值'
        }
        this.all = {
          user_id:this.$route.query.id,
          exp:"",
          remark:""
        }
        this.log = true
      },
      queding:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        if(this.tt == '扣除等级值'){
          obj.exp = obj.exp * -1
        }
        axios.post('/own/level/addExp',obj).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.log = false
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getlist:function(){
        axios.get('/own/level/explog?user_id='+this.$route.query.id).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      fanye:function(val){
        this.search.page = val
        this.getlist()
      }
		}
	}
</script>


<style scoped lang="less">
  .yongjinjilu{

  }
</style>
